<template>
  <div class="details">
    <el-container>
      <el-main>
        <div class="tc-title">
          <div style="    border-radius: 4px;text-align: center;font-weight: 500; font-size: 24px;background: #fbfcff;border: 1px solid #e1e5ed;line-height:106px">{{form.title}}</div>
        </div>
        <div class="input">
          <div>
            <span class="text">信息类别：</span>
            <span>{{infoTypeoptions | fromatTable(form.infoTypeId,'itemName','id')}}</span>
          </div>
          <div>
            <span class="text">优先级：</span>
            <span>{{options | fromatTable(form.priorityNum,'label','value')}}</span>
          </div>
          <div>
            <span class="text">密级：</span>
            <span>{{secretLeveoptions | fromatTable(form.secretLevelId,'itemName','id')}}</span>
          </div>
        </div>
        <div class="input" style="height:auto;padding:10px 0;word-break:break-all;">
          <span>
            <span class="text">主题：</span>
            <span> {{form.subjectWord}}</span>
          </span>
        </div>
        <div class="input">
          <div style="display:flex; align-items: center;">
            <span class="text">信息正文：</span>
            <FileComponent fileCode="noticeboyFile" :files="JSON.parse(form.textContent)" :upload="false" />
          </div>
        </div>
        <div class="input" style="height:auto;padding:10px 0;word-break:break-all;">
          <div style="display:flex; align-items: center;">
            <span class="text">附件：</span>
            <FileComponent fileCode="noticeattachFile" :files="JSON.parse(form.enclosure)" :upload="false" />
          </div>
        </div>
        <div>
          <div style="width:100%;word-break:break-all;" v-html="form.richText"></div>
        </div>
        <viewFile :wpsUrl="wpsUrl" :token="token" />
        <div style="text-align: right;color:#C0C4CC"> <span>{{form.effectTime}}-{{form.endTime}}</span></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getDetail, update_read_status } from '@/api/basedata/notice.js';
import { getDicType, getViewUrlWebPath } from '@/api/common';
import FileComponent from '@/components/File/fileComponent';
import viewFile from '@/components/File/wps';
export default {
  components: { FileComponent, viewFile },
  data() {
    return {
      id: '',
      type: '',
      form: {
        textContent: '[]',
        enclosure: '[]',
      },
      options: [{ label: '极高', value: 1 }, { label: '高', value: 2 }, { label: '中', value: 3 }, { label: '低', value: 4 }],
      infoTypeoptions: [],
      secretLeveoptions: [],
      wpsUrl: '',
      token: '',
    };
  },
  created() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.getNotice()
    getDicType({ code: 'infoType' }).then(res => {
      this.infoTypeoptions = res.data.items
    });
    getDicType({ code: 'secretLeve' }).then(res => {
      this.secretLeveoptions = res.data.items
    });
    update_read_status({ noticeId: this.$route.query.id, readStatus: 1 });
  },
  methods: {
    getNotice() {
      getDetail(this.id).then(res => {
        this.form = res.data;
        if (this.form.textContent){
          getViewUrlWebPath({fileUrl: JSON.parse(res.data.textContent)[0]?.fileUrl,waterMark: 1}).then(res => {
            if (res.code === 1001) {
              this.wpsUrl = res.data;
            }
          })
        }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.upload-item {
  display: flex;
  flex-wrap: wrap;
  .upload-item-text {
    cursor: pointer;
    padding: 5px 10px;
    margin: 10px 10px 0 10px;
    border: 1px solid #e1e5ed;
    border-radius: 4px;
    opacity: 0.5;
    color: $bg_color;
    .iconhome_icon_txt {
      margin-right: 5px;
      font-size: 14px;
    }
    a {
      color: $bg_color;
      text-decoration: none;
    }
  }
  .upload-item-text:hover {
    color: $bg_color;
    opacity: 1;
  }
}
.details {
  padding: 10px;
  height: calc(100% - 56px);
  .el-main {
    background: #ffffff;
    box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
    width: 90%;
    margin: 0 auto;
  }
}
.tc-title {
  margin: 0 0 15px;
  .el-input--small .el-input__inner {
    height: 108px;
  }
}
.input {
  display: flex;
  height: 40px;
  align-items: center;
  > div {
    width: 33.33%;
  }
}
</style>
